<!-- eslint-disable vue/no-mutating-props -->
<template>
    <el-dialog
        class="dialog-el"
        :title="`${id > 0 ? '编辑公告' : '新建公告'}`"
        v-model:visible="dialogVisible"
        width="70%"
        :before-close="handleClose"
    >
        <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item label="标题" prop="subject">
                <el-input
                    v-model="ruleForm.subject"
                    placeholder="请输入内容"
                    prefix-icon="el-icon-edit"
                />
            </el-form-item>
            <el-form-item label="内容" prop="body">
                <el-input
                    v-model="ruleForm.body"
                    type="textarea"
                    placeholder="请输入内容"
                    rows="5"
                />
            </el-form-item>
            <el-form-item label="排序字段" prop="displayorder">
                <el-input
                    v-model="ruleForm.displayorder"
                    placeholder="100"
                    prefix-icon="el-icon-edit"
                />
            </el-form-item>
            <el-form-item label="是否取消展示" prop="name" class="shifouquxiao">
                <template>
                    <el-radio v-model="ruleForm.isPublic" label="0">
                        展示
                    </el-radio>
                    <el-radio v-model="ruleForm.isPublic" label="1">
                        不展示
                    </el-radio>
                </template>
            </el-form-item>
            <el-form-item label="颜色" prop="name" class="">
                <template>
                    <el-radio v-model="ruleForm.color" label="#E66A6A">
                        红色
                    </el-radio>
                    <el-radio v-model="ruleForm.color" label="#0000FF">
                        蓝色
                    </el-radio>
                    <el-radio v-model="ruleForm.color" label="#00FF00">
                        绿色
                    </el-radio>
                    <el-radio v-model="ruleForm.color" label="#ffffff">
                        白色
                    </el-radio>
                </template>
            </el-form-item>

            <el-form-item label="开始时间" required prop="starttime">
                <el-date-picker
                    v-model="ruleForm.starttime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="输入开始时间"
                />
            </el-form-item>
            <el-form-item label="结束时间" required prop="endtime">
                <el-date-picker
                    v-model="ruleForm.endtime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="输入结束时间"
                />
            </el-form-item>
            <el-form-item label="能收到用户的公告集合" prop="aaa" class="">
                <el-input
                    v-model="ruleForm.userids"
                    type="textarea"
                    placeholder="英文,隔开:1,2,3"
                    rows="5"
                />
            </el-form-item>
        </el-form>

        <el-button
            type="primary"
            icon="el-icon-document"
            class="submit"
            @click="addAnnouncement"
        >
            提交
        </el-button>
    </el-dialog>
</template>
<script>
import { createNotice, Details, sunmitDate } from '@/api/admin/notice';
import moment from 'moment';
export default {
    props: {
        id: { type: Number, default: -1 },
        dialogVisible: { type: Boolean, default: false },
    },
    data() {
        return {
            ruleForm: {},
            rules: {
                subject: [
                    { required: true, message: '请输标题', trigger: 'blur' },
                    {
                        min: 2,
                        max: 10,
                        message: '长度在 2 到 10 个字符',
                        trigger: 'blur',
                    },
                ],
                displayorder: [
                    {
                        required: true,
                        message: '请输排序字段',
                        trigger: 'blur',
                    },
                    {
                        min: 1,
                        max: 10,
                        message: '长度在 1 到 10 个字符',
                        trigger: 'blur',
                    },
                ],
                body: [
                    { required: true, message: '请输内容', trigger: 'blur' },
                    {
                        min: 1,
                        max: 150,
                        message: '长度在 1到 150 个字符',
                        trigger: 'blur',
                    },
                ],
                starttime: [
                    {
                        type: 'string',
                        required: true,
                        message: '请选择日期',
                        trigger: 'blur',
                    },
                ],
                endtime: [
                    {
                        type: 'string',
                        required: true,
                        message: '请选择日期',
                        trigger: 'blur',
                    },
                ],
            },
        };
    },
    watch: {
        id: function (id) {
            if (id > 0) {
                this.Detailsget();
            }
        },
    },
    methods: {
        handleClose() {
            this.$emit('close', '');
            this.$refs.ruleForm.resetFields();
        },
        Detailsget() {
            Details({ id: this.id }).then((res) => {
                const { endtime, starttime } = res.message;
                this.ruleForm = {
                    ...res.message,
                    starttime: moment(starttime).format('YYYY-MM-DD hh:mm:ss'),
                    endtime: moment(endtime).format('YYYY-MM-DD hh:mm:ss'),
                };
            });
        },
        addAnnouncement() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    if (this.id > 0) {
                        sunmitDate({ ...this.ruleForm }).then((res) => {
                            if (res.code === 200) {
                                this.$message.success('编辑成功');
                                this.$refs.ruleForm.resetFields();
                                this.$emit('close', '');
                                this.ruleForm = {};
                            }
                        });
                    } else {
                        createNotice({ ...this.ruleForm })
                            .then((res) => {
                                if (res.code == 200) {
                                    this.$message.success('创建成功');
                                    this.$refs.ruleForm.resetFields();
                                    this.$emit('close', '');
                                    this.ruleForm = {};
                                }
                            })
                            .catch((e) => {
                                console.log('@@@ add news error @@@', e);
                            });
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    },
};
</script>
<style scoped lang="scss">
.dialog-el {
    padding-bottom: 50px;
    .el-dialog__header {
        width: 1000px;
    }
}
.submit {
    position: absolute;
    right: 20px;
    bottom: 10px;
    background-color: #4658a4;
}
.hr {
    border: 1px #f1f1f1 solid;
}
</style>
